<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">抽奖大转盘</block>
		</cu-custom>
		<view class="content">
			<view class="h2">LotteryDraw 抽奖大转盘</view>
			<view class="tip">LotteryDraw组件主要用于抽奖大转盘，无需用户交互。<strong>注:</strong>由于此组件基于uni-app实现，所以在使用之前，请确保自己了解过 </view>
			<view class="h3">示例1</view>
			<LotteryDraw @getData="getDataLotteryDraw" :deg="60" @getPrize="getPrize" :result="result"></LotteryDraw>

		</view>
	</view>
</template>

<script>
	import LotteryDraw from "@/components/LotteryDraw/LotteryDraw";
	export default {
		components: {
			LotteryDraw
		},
		data() {
			return {
				result: "", //中奖结果
				Prize: ["谢谢参与", "洗车券", "保养", "谢谢参与", "洗车券", "保养"] //奖项从0,1,2,3,5开始 有6个奖项deg=60 有10个奖项deg=36
			}
		},
		onLoad(e) {

		},
		created() {

		},
		methods: {
			getDataLotteryDraw() { //点击抽奖获取奖项--this.result为统过AJAX向后台请求返回的奖项
				let res = Math.floor(Math.random() * 10 + 1)
				console.log(res)
				this.result = "1," + res;
			},
			getPrize(res) {
				console.log(res)
				uni.showToast({
					title: this.Prize[res],
					icon: "success",
					duration: 2000
				});
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.content {
		padding: 40rpx;
		box-sizing: border-box;

		.bnt {
			position: relative;
			width: 100%;
			background: #2b9939;
			color: #fff;
			height: 60rpx;
			line-height: 60rpx;
			margin: 0 auto 40rpx;
			text-align: center;
			border-radius: 10rpx;
		}

		.h2 {
			font-size: 28rpx;
			margin-bottom: 10rpx;
			font-weight: bold;
		}

		.h3 {
			margin: 20rpx auto;
			font-weight: bold;
			color: red;
		}

		.tip {
			margin: 20rpx auto;
		}

		.title {
			margin: 20rpx auto;
		}
	}
</style>
